<!DOCTYPE html>
<html>
<head>
    <title>检测结果列表</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="/static/css/main.css">
    <style>
        h1 {
            color: var(--primary-color);
            margin-bottom: 20px;
        }
        h2 {
            margin-top: 30px;
            color: #555;
            font-size: 1.3em;
        }
    </style>
</head>
<body class="page-transition">
    <!-- 顶部导航栏 -->
    <div class="nav-links">
        <a href="/" class="nav-link"><i class="fas fa-home"></i> 首页</a>
        <a href="/results" class="nav-link active"><i class="fas fa-list"></i> 检测结果</a>
        <a href="/history" class="nav-link"><i class="fas fa-history"></i> 历史记录</a>
        <a href="/stats" class="nav-link"><i class="fas fa-chart-bar"></i> 结果统计</a>
    </div>
    <!-- 页面主内容容器 -->
    <div class="container">
        <h1><i class="fas fa-clipboard-list"></i> 检测结果</h1>
        <div class="filter-controls" id="filterControls">
            <button id="toggle-select" class="filter-button" style="background-color: #2196F3;" title="全选/取消全选"><i class="fas fa-check-square"></i></button>
            <select id="file-filter" class="filter-select">
                <option value="all">所有文件</option>
                <option value="corrected">修正后图像</option>
                <option value="hotpixels">热像素图像</option>
                <option value="txtfiles">热像素信息</option>
            </select>
            <select id="field-filter" class="filter-select">
                <option value="all">所有天区</option>
            </select>
            <select id="object-filter" class="filter-select">
                <option value="all">所有目标</option>
            </select>
            <select id="date-filter" class="filter-select">
                <option value="all">所有日期</option>
            </select>
            <select id="method-filter" class="filter-select">
                <option value="all">所有处理方法</option>
            </select>
            <button id="batch-download" class="filter-button download" title="下载选中文件"><i class="fas fa-download"></i></button>
            <button id="batch-archive" class="filter-button archive" title="转存选中文件"><i class="fas fa-archive"></i></button>
            <button id="batch-delete" class="filter-button batch-delete" title="删除选中文件"><i class="fas fa-trash"></i></button>
        </div>

        <script>
        // 智能动画控制
        let lastFilterTime = 0;
        const filterControls = document.getElementById('filterControls');
        const filterSelects = document.querySelectorAll('.filter-select');
        
        function handleFilterChange() {
            const now = Date.now();
            if (now - lastFilterTime < 1000) { // 1000ms内连续操作视为快速筛选
                filterControls.classList.add('fast-filtering');
                setTimeout(() => {
                    filterControls.classList.remove('fast-filtering');
                }, 500);
            }
            lastFilterTime = now;
            applyFilters();
        }
        
        filterSelects.forEach(select => {
            select.addEventListener('change', handleFilterChange);
        });
        </script>

        <div id="file-display-area">
            <ul class="file-list">
                {% set displayed_files = [] %}
                {% for file in hotpixels + corrected + txtfiles %}
                {% if file not in displayed_files %}
                <li class="file-item" data-filetype="{% if '_hotpixels_params' in file %}params{% elif '_hotpixels' in file %}hotpixels{% elif '_hp' in file %}corrected{% else %}unknown{% endif %}">
                    <input type="checkbox" class="file-checkbox" data-filename="{{ file }}" style="margin-right: 10px;">
                    <span class="file-name2" title="{{ file }}">{{ file }}</span>
                    <div class="file-actions">
                        <a href="/download/{{ file }}" target="_blank" class="filter-button download" title="下载">
                            <i class="fas fa-download"></i>
                        </a>
                        <button onclick="moveToHistory('{{ file }}')" class="filter-button archive" title="转存到历史记录">
                            <i class="fas fa-archive"></i>
                        </button>
                        <button class="filter-button file-delete-btn" data-filename="{{ file }}" title="删除">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </li>
                {% set _ = displayed_files.append(file) %}
                {% endif %}
                {% endfor %}
                {% if (hotpixels + corrected + txtfiles)|length == 0 %}
                <li class="empty-message">没有可显示的文件</li>
                {% endif %}
            </ul>
        </div>
    </div>

    <script>
        /**
         * 初始化筛选器选项
         * 功能：从API获取元数据并填充筛选器下拉菜单
         * 流程：
         * 1. 设置筛选器为加载状态
         * 2. 从API获取元数据
         * 3. 填充筛选器选项
         * 4. 回退方案：从文件名解析元数据
         */
        function initFilters() {
            const filterSelects = ['field-filter', 'object-filter', 'date-filter', 'method-filter'];
            filterSelects.forEach(id => {
                const select = document.getElementById(id);
                select.disabled = true;
                const loadingOption = document.createElement('option');
                loadingOption.value = 'loading';
                loadingOption.textContent = '加载中...';
                while (select.options.length > 1) select.remove(1);
                select.appendChild(loadingOption);
            });

            fetch('/api/get-results-metadata')
            .then(response => {
                if (!response.ok) throw new Error('API请求失败');
                return response.json();
            })
            .then(metadata => {
                if (!metadata || !metadata.success) throw new Error('无效的元数据格式');

                function fillSelect(selectId, values) {
                    const select = document.getElementById(selectId);
                    select.disabled = false;
                    while (select.options.length > 1) select.remove(1);
                    values.forEach(value => {
                        if (value) {
                            const option = document.createElement('option');
                            option.value = value;
                            option.textContent = value;
                            select.appendChild(option);
                        }
                    });
                }

                if (metadata.fields) fillSelect('field-filter', metadata.fields);
                if (metadata.objects) fillSelect('object-filter', metadata.objects);
                if (metadata.dates) fillSelect('date-filter', metadata.dates);
                if (metadata.methods) fillSelect('method-filter', metadata.methods);

                // 初次调用筛选，显示全部
                applyFilters();
            })
            .catch(error => {
                console.error('获取元数据失败:', error);
                // 回退使用文件名解析
                const fields = new Set();
                const objects = new Set();
                const dates = new Set();
                const methods = new Set();

                document.querySelectorAll('.file-item').forEach(item => {
                    const filename = item.querySelector('.file-name2').title;
                    const parts = filename.split('_');
                    if (parts.length >= 4) {
                        fields.add(parts[0]);
                        objects.add(parts[1]);
                        dates.add(parts[2].substring(1, 9));
                        methods.add(parts[3]);
                    }
                });

                function fillSelect(selectId, values) {
                    const select = document.getElementById(selectId);
                    select.disabled = false;
                    while (select.options.length > 1) select.remove(1);
                    Array.from(values).sort().forEach(value => {
                        const option = document.createElement('option');
                        option.value = value;
                        option.textContent = value;
                        select.appendChild(option);
                    });
                }

                fillSelect('field-filter', fields);
                fillSelect('object-filter', objects);
                fillSelect('date-filter', dates);
                fillSelect('method-filter', methods);

                applyFilters();
            });
    }

        /**
         * 主筛选函数
         * 功能：应用筛选条件并更新文件列表显示
         * 流程：
         * 1. 获取当前筛选条件
         * 2. 显示加载指示器
         * 3. 从缓存或API获取元数据
         * 4. 应用筛选条件
         * 5. 更新UI显示
         */
        function applyFilters() {
            const fileType = document.getElementById('file-filter').value;
            const field = document.getElementById('field-filter').value;
            const object = document.getElementById('object-filter').value;
            const date = document.getElementById('date-filter').value;
            const method = document.getElementById('method-filter').value;

            const loadingIndicator = document.createElement('div');
            loadingIndicator.className = 'loading-indicator';
            loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在筛选...';
            document.getElementById('file-display-area').prepend(loadingIndicator);

        if (window.fileMetadataCache && window.fileMetadataCache.success) {
            processFilters(window.fileMetadataCache, fileType, field, object, date, method);
            loadingIndicator.remove();
        } else {
            fetch('/api/get-results-metadata')
                .then(response => response.json())
                .then(metadata => {
                    if (!metadata || !metadata.success || !Array.isArray(metadata.files)) {
                        console.error("元数据格式错误");
                        loadingIndicator.remove();
                        return;
                    }
                    window.fileMetadataCache = metadata;
                    processFilters(metadata, fileType, field, object, date, method);
                    loadingIndicator.remove();
                })
                .catch(error => {
                    console.error("筛选时加载元数据失败", error);
                    loadingIndicator.remove();
                });
            // 重置全选按钮状态
            document.getElementById('toggle-select').innerHTML = '<i class="fas fa-check-square"></i>';
            }
        }

        /**
         * 筛选处理函数
         * @param {object} metadata - 文件元数据
         * @param {string} fileType - 文件类型筛选条件
         * @param {string} field - 天区筛选条件
         * @param {string} object - 目标筛选条件
         * @param {string} date - 日期筛选条件
         * @param {string} method - 方法筛选条件
         * 功能：根据筛选条件处理文件显示
         */
        function processFilters(metadata, fileType, field, object, date, method) {
            const allowedTypesMap = {
                all: ['corrected', 'hotpixels', 'params'],
                corrected: ['corrected'],
                hotpixels: ['hotpixels'],
                txtfiles: ['params']
            };

            const allowedTypes = allowedTypesMap[fileType] || [];
            const validFiles = new Set();

            metadata.files.forEach(entry => {
                const fieldMatch = (field === 'all' || entry.field_id === field);
                const objectMatch = (object === 'all' || entry.object === object);
                const dateMatch = (date === 'all' || entry.date_obs === date);
                const methodMatch = (method === 'all' || entry.method === method);

                if (fieldMatch && objectMatch && dateMatch && methodMatch) {
                    if (allowedTypes.includes(entry.type)) {
                        validFiles.add(`${entry.filename}:::${entry.type}`);
                    }
                }
            });

            document.querySelectorAll('.file-item').forEach(item => {
                const filename = item.querySelector('.file-name2').title;
                const type = item.dataset.filetype;
                const key = `${filename}:::${type}`;
                item.style.display = validFiles.has(key) ? '' : 'none';
            });

            // 移除“正在筛选...”加载提示
            const loadingIndicator = document.querySelector('.loading-indicator');
            if (loadingIndicator) loadingIndicator.remove();
        }

        /**
         * DOM加载完成事件监听器
         * 功能：初始化页面并绑定所有事件
         * 流程：
         * 1. 设置当前作用域
         * 2. 初始化筛选器
         * 3. 绑定所有交互事件：
         *    - 筛选器变更
         *    - 全选/取消全选
         *    - 批量删除
         *    - 单个文件删除
         *    - 批量下载
         *    - 批量转存
         */
        document.addEventListener('DOMContentLoaded', () => {
            // 1. 设置当前作用域变量
            window.currentScope = 'results';
            // 2. 初始化筛选器
            initFilters();
            // 3. 绑定筛选器事件

            // 3.1. 筛选器绑定 - 为所有筛选器添加变更事件监听
            /**
             * 筛选器变更事件处理
             * 功能：当任一筛选条件变更时，重新应用筛选
             * 监听对象：file-filter, field-filter, object-filter, date-filter, method-filter
             */
            ['file-filter', 'field-filter', 'object-filter', 'date-filter', 'method-filter'].forEach(id => {
                document.getElementById(id).addEventListener('change', applyFilters);
            });

            // 3.2. 全选/取消全选切换（只针对当前可见文件）
            /**
             * 全选/取消全选功能
             * 功能：切换当前可见文件的选择状态
             * 特点：
             * - 仅操作当前可见文件
             * - 自动切换按钮图标状态
             */
            document.getElementById('toggle-select').addEventListener('click', () => {
                const visibleCheckboxes = Array.from(document.querySelectorAll('.file-item:not([style*="display: none"]) .file-checkbox'));
                const allChecked = visibleCheckboxes.length > 0 && visibleCheckboxes.every(cb => cb.checked);
                visibleCheckboxes.forEach(cb => cb.checked = !allChecked);
                document.getElementById('toggle-select').innerHTML = allChecked ? '<i class="fas fa-square"></i>' : '<i class="fas fa-check-square"></i>';
            });

            // 3.3. 批量删除功能
            /**
             * 批量删除事件处理
             * 流程：
             * 1. 获取选中文件列表
             * 2. 验证选择有效性
             * 3. 调用API执行批量删除
             * 4. 处理响应结果
             * 5. 捕获并处理错误
             */
            document.getElementById('batch-delete').addEventListener('click', () => {
                const selectedFiles = Array.from(document.querySelectorAll('.file-checkbox:checked'))
                    .map(cb => cb.dataset.filename);

                if (selectedFiles.length === 0) {
                    alert('请至少选择一个文件');
                    return;
                }

                fetch('/api/batch-delete', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filenames: selectedFiles, scope: window.currentScope })
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();  // 直接刷新页面
                        } else {
                            alert('删除失败：' + data.error);
                        }
                    })
                    .catch(error => {
                        alert('批量删除失败：' + error.message);
                    });
            });
            
            // 3.4. 单个文件删除功能
            /**
             * 单个文件删除事件处理
             * 功能：删除单个指定文件
             * 特点：
             * - 为每个删除按钮绑定事件
             * - 包含完整的错误处理
             */
            document.querySelectorAll('.file-delete-btn').forEach(button => {
                button.addEventListener('click', () => {
                    const filename = button.dataset.filename;

                    fetch('/api/delete-file', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ filename, scope: window.currentScope })
                    })
                        .then(res => res.json())
                        .then(data => {
                            if (data.success) {
                                location.reload();  // 直接刷新页面
                            } else {
                                alert('删除失败：' + data.error);
                            }
                        })
                        .catch(err => {
                            alert('请求失败：' + err.message);
                        });
                });
            });

            // 3.5. 批量下载功能
            /**
             * 批量下载事件处理
             * 功能：打包下载选中的多个文件
             * 特点：
             * - 显示下载进度指示器
             * - 自动创建下载链接
             * - 包含完整的错误处理流程
             */
            document.getElementById('batch-download').addEventListener('click', () => {
                const selectedFiles = Array.from(document.querySelectorAll('.file-checkbox:checked')).map(cb => cb.dataset.filename);
                if (selectedFiles.length === 0) {
                    alert('请至少选择一个文件');
                    return;
                }

                const loadingIndicator = document.createElement('div');
                loadingIndicator.className = 'loading-indicator';
                loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在准备下载...';
                document.getElementById('file-display-area').prepend(loadingIndicator);

                fetch('/api/batch-download', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filenames: selectedFiles })
                })
                    .then(res => {
                        if (!res.ok) throw new Error('下载失败');
                        return res.blob();
                    })
                    .then(blob => {
                        const url = window.URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        a.download = 'selected_files.zip';
                        document.body.appendChild(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);
                    })
                    .catch(err => {
                        alert('下载失败：' + err.message);
                    })
                    .finally(() => {
                        loadingIndicator.remove();
                    });
            });

            // 3.6. 批量转存功能
            /**
             * 批量转存事件处理
             * 功能：将选中文件转存到历史记录
             * 特点：
             * - 调用批量转存API
             * - 成功时刷新页面
             * - 包含错误提示机制
             */
            document.getElementById('batch-archive').addEventListener('click', () => {
                const selectedFiles = Array.from(document.querySelectorAll('.file-checkbox:checked'))
                    .map(cb => cb.dataset.filename);

                if (selectedFiles.length === 0) {
                    alert('请至少选择一个文件');
                    return;
                }

                fetch('/api/batch-move-to-history', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ filenames: selectedFiles })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        location.reload();  // 刷新页面以更新文件列表
                    } else {
                        alert('转存失败: ' + (data.error || '未知错误'));
                    }
                })
                .catch(() => alert('转存失败，请重试'));
            });

        });

        /**
         * 单个文件转存到历史记录
         * @param {string} filename - 要转存的文件名
         * 功能：将单个文件从结果列表转存到历史记录
         * 流程：
         * 1. 调用API转存文件
         * 2. 处理响应结果
         * 3. 捕获并处理错误
         */
        function moveToHistory(filename) {
            fetch('/api/batch-move-to-history', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ filenames: [filename] })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('转存失败: ' + (data.error || '未知错误'));
                }
            })
            .catch(() => alert('转存请求失败'));
        }

    </script>
</body>
</html>
